* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

li {
    list-style: none;
}

.accordion {
    overflow: hidden;
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.accordion>li {
    width: 100%;
}

.accordion>li input {
    /* 将单选按钮隐藏起来 */
    display: none;
}

.accordion>li label {
    position: relative;
    /* label元素是行内元素 需要将其转为块级元素 才能设置宽度和高度 */
    display: block;
    width: 100%;
    padding: 20px 50px;
    color: #fff;
    background-color: #5fb878;
    /* 鼠标移入变小手 */
    cursor: pointer;
}

/* .accordion>li label::after {
    content: "+";
    position: absolute;
    right: 20px;
    bottom: -14px;
    width: 30px;
    height: 15px;
    	/* inherit这个属性值可以继承父元素的属性值 
	background-color: inherit;
	clip-path: polygon(0 0, 100% 0, 50% 100%);

} */
.accordion>li label::after {
    content: "";
    position: absolute;
    right: 25px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background-color: inherit;
    /* /* 第二种方法是通过旋转来实现 这种方法显然比第一种简单  */
    transform: rotate(45deg);
}

.accordion>li label:hover {
    background-color: #53aa6c;
}

/* :not()选择器选取的是除括号里的元素以外的其它元素 :first-child选择器是第一个元素 */
.accordion>li:not(:first-child) label {
    border-top: 1px solid #38814d;
}

.accordion>li ol {
    width: 100%;
    background-color: #333;
}

.accordion>li ol li {
    position: relative;
    width: 100%;
    height: 0;
    line-height: 50px;
    padding-left: 20px;
    color: #fff;
    cursor: pointer;
    /* 加过渡 */
    transition: all 0.7s;
}

.accordion>li ol li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 5px;
    height: 44px;
    background-color: #5fb878;
    transform: scaleY(0);
    /* 加过渡 */
    transition: all 0.5s;
}


/* 实现 */
.accordion>li ol li:hover::before {
    transform: scaleY(1);
}
.accordion > li input:checked ~ ol li {
	height: 50px;
}